<template>
	<view class="container">
		<u-empty v-if="dataEmpty" text="数据为空" mode="list"></u-empty>
		<view class="mainPart" v-else>
			<view class="mainPart-header">
				<view class="headerTitle">
					{{actionrRsultObj.articleTitle}}
				</view>
			</view>
			<view class="_flex _justify_Around desc">
				<!-- <view class="">
					来源：{{}}
				</view> -->
				<view class="">
					发布时间：{{actionrRsultObj.updateTime}}
				</view>
			</view>
		</view>
		<view class="news_content" v-html="actionrRsultObj.aContent">
		</view>

		<view :class="isLike==1 ? 'zan zanon' : 'zan'" @click="zan()">
			<u-icon name="thumb-up" color="#fff" size="60"></u-icon>
		</view>

	</view>
</template>

<script>
	import API from "@/api/news.js"
	export default {
		name: "newsDetail",
		onLoad(options) {
			this.articleId = options.articleId;
		},
		onShow() {
			this.getNewsDetail();

			this.token = uni.getStorageSync('token')
			if (this.token) {
				this.getIsLike();
			}
		},
		data() {
			return {
				https: getApp().globalData.picturePath,
				articleId: "",
				dataEmpty: false, //数据为空的展示
				actionrRsultObj: {
					articleTitle: "",
					updateTime: "",
					aContent: ''
				},
				isLike: 0,
				token: "",

			}
		},

		methods: {
			getNewsDetail() {
				let data = {
					articleId: this.articleId
				}
				API.getNewsDetail(data).then(res => {
					console.log(res);
					for (let x in res.data) {
						if (res.data[x] == undefined || res.data[x] == null) {
							res.data[x] = '';
						}
					}
					res.data.aContent = res.data.aContent.replace(/\<img/gi,
						'<img style="max-width:100%!important; width：auto;height:auto;display:block; margin:10px auto!important;  float: none!important;"');
					this.actionrRsultObj = res.data;
				})
			},

			getIsLike() {
				let data = {
					articleId: this.articleId,
					token: this.token
				}
				API.getIsLike(data).then(res => {
					console.log(res);
					this.isLike = res.data;
				})
			},

			zan() {
				let data = {
					articleId: this.articleId,
					token: this.token
				}
				API.postAsLike(data).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.isLike = res.data;
					}
				})

			}

		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.container {
		padding: 32rpx 32rpx;
		font-size: 14px;
		line-height: 24px;
	}

	// 头部
	.mainPart {
		&-header {
			padding-bottom: 30rpx;

			.headerTitle {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				padding: 20rpx 10rpx;
			}

			.headerNumber {
				background-color: #EBF6FF;
				padding: 32rpx 30rpx;
				border-radius: 10rpx;

				&-part {
					border-bottom: 1px solid #e4e0e0;
					display: flex;

					.smalltext {
						width: 174rpx;
						font-weight: bold;
					}

					.smallcontent {
						color: #666;
					}

					.smallcontent.red {
						color: red;
					}
				}

				&-part:last-child {
					border-bottom: none;
				}
			}
		}

		.desc {
			color: #999;
			padding: 20rpx;
			border-top: 1px solid #eee;
		}
	}

	.zan {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		display: flex;
		background-color: #eee;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
	}

	.zanon {
		background-color: #002A58;
	}
	.news_content{
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.news_content rich-text img {
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}
</style>
